<!--  -->
<template>
    
    <div class="">
     <van-form @submit="changeFromData">
         <van-cell-group>
            <van-field
                rows="1"
                autosize
                type="textarea"
                v-model="fromdata.lectureItems"
                required
                label-width="4.5em"
                :readonly="!canEdit"
                label="宣讲事项:"
                placeholder="请填写宣讲事项"
                maxlength="100"
                :show-word-limit="canEdit"
                :rules="[{ required: true, message: '' }]"
                name="lectureItems"
            />
        </van-cell-group>
    
         <van-field
                readonly
                required
                right-icon="arrow" 添加右侧图标
                input-align="left" 设置文字位置
                label-width="2.5em"  设置标题长度
                clickable
                name="pantchTypeName"  
                :value="fromdata.pantchTypeName"
                label="类别:"
                placeholder="请选择类别"
                @click="showPicker =canEdit? true:false"
            
                :rules="[{ required: true, message: '' }]"
                />
                <van-popup v-model="showPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                />
                </van-popup>

        <div class="border-b-1">
                    <van-field label-width="10em" readonly   name="content"  
                    label="支撑材料附件:" class="lyy-width" input-align="left" placeholder="" >
                      </van-field>
                        <template >
                            <template  v-if="file_is_show">
                                <div v-for="(item,index) in fromdata.drawFiles" :key="item.id" class="fileBox">
                                    <div readonly class="font14 fileLink" style="color:#0F85CF">
                                        
                                        <!-- <a :href="item.downLoadUrl.replace('/sys/file/download',
                                        'https://hfx.net/ha5giservice/hqwx/sys/file/download/anonymous')">{{item.fileName}}</a> -->
                                         <a 
                                         target="_blank"
                                         @click="openFileUrlfun(item.anonymousFilePath)"
                                         >{{item.fileName}}</a>
                                    </div>
                                    <span class="font12 color-red ml5" v-if='canEdit' @click="uploadFileDelete(index)">X</span>
                                </div>
                            </template>

                            <form v-if='canEdit' action="" class="font14 file" style="text-align:right;padding-right:20px">
                                <van-uploader v-model="fileList" :after-read="fileUpload"  :preview-image='false'>
                                    <van-button icon="plus" type="primary" color="#60a9ec">上传文件</van-button>
                                </van-uploader>
                            </form>
                        </template>
                  
        </div>
        <div v-show="canEdit" class="footer">
                <van-button  block type="info" native-type="submit">保存</van-button>
         </div>
        </van-form>
    </div>
  
</template>

<script>
import {getZcxjFromDetail,uploadProcessFiles,saveZcxjFromDetail,changeZcxjFromDetail} from '@/api/gettodo'
import {Toast ,Notify} from 'vant'
import {mapGetters} from 'vuex'
import util from "@/assets/js/public";
import Axios from 'axios';
import { getToken } from '@/assets/js/auth';
import {openFileUrl} from '@/store/openFile'
  export default {
    components: {

    },
    name:'zcxjfromdetail',
    data() {
       return {
            choseTypeName: '',
            columns: ['必选项', '推荐项'],
            showPicker: false,
            params:[],
            fromdata:{},
            canEdit:false,
            isdraw:false,
            webidCode:'',
            file_is_show:true,
            fileList: []
       }
    },
    computed:{
        ...mapGetters(['user']),
    },
    //生命周期--创建完成
    created() {
       
        
    },
    activated(){
        console.log("是否可编辑"+this.$route.query.fileId+this.$route.query.fileId);
          console.log("是否可编辑"+this.$route.query.isdrawFrom+this.$route.query.webidCode);
        this.params=this.$route.query;
        this.isdraw=this.params.isdrawFrom
        this.webidCode=this.params.webidCode
        if(this.isdraw==true){
            this.canEdit=true
            this.fromdata={}
        }else{
             if(this.params.canEdit==true){
                this.canEdit=true;
             }else{
                this.canEdit=false;
             }
            if(this.params.fileId){
                this.getZcxjFromDetailData();
            }
        }
    },
    //生命周期--挂载完成
    mounted() {
        console.log ("挂载完成formdetail" );
    },
    methods:{
        openFileUrlfun(value){
            console.log("AAAAAA"+openFileUrl(value))
            this.$router.push(
                {
                 name:'fileview',
                 query:{
                     openFileUrl: openFileUrl(value)
                    }
                }
            );
            // var param = {'url':openFileUrl(value),"fileName":"附件.doc",'uid':"xxx",'cookie':'xxxx'}
            // this.moaBridge.preview(param);
        },
        getZcxjFromDetailData(){
            Toast.loading({
                message:"加载中...",
                forbidClick:false,
            });
            getZcxjFromDetail(Object.assign(this.params,{userName:this.user.userName}))
                .then((result)=>{
                    Toast.clear();
                    if(!result.data){
                        Notify(result.message);
                        return;
                    }
                    let resultdata=result.data.data;
                    this.fromdata=resultdata;
                    if(this.fromdata.pantchType==1){
                        this.fromdata.pantchTypeName='必选项'
                    }else if(this.fromdata.pantchType==2){
                        this.fromdata.pantchTypeName='推荐项'
                    }
                })
        }, 
        onConfirm(value){
            this.fromdata.pantchTypeName=value;
            this.showPicker=false;
        },
        fileUpload(file,detail){
            console.log('名字名字'+this.fileList[0].file.name)
            console.log('名字名字22'+this.fileList)
            // // let file = event.target.files[0];
            console.log('111'+JSON.stringify(file))
            let dataurl=file.content;
            // export const dataURLtoFile = (dataurl, filename) => {
                let arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                // new File([u8arr], filename, {
                //     type: mime
                // });
            // }
            var filename=    this.fileList[0].file.name;
            console.log('AAAAAAA'+u8arr)
            let fileData = new FormData();
            fileData.append('pmInsType', 'A');
            fileData.append('pmInsTypePart', '1');       
            fileData.append('files', new File([u8arr], filename+"", {
                    type: mime
                }));
            this.fileList=[];
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
            });
            // console.log('222222'+JSON.stringify(fileData))
            uploadProcessFiles(fileData,Object.assign({userName:this.user.userName}))
            .then(res=>{
                Toast.clear();
                if(!res.data){
                    Notify(res.message);
                    return;
                }
                this.file_is_show=false;
                if(this.fromdata!=null&&this.fromdata.drawFiles!=null){
                    let listdetails = this.fromdata.drawFiles;
                    listdetails= listdetails.concat(res.data.data.sysFiles);
                    this.fromdata.drawFiles=listdetails;
                    console.log(JSON.stringify(this.fromdata.drawFiles))
                }else{
                    if(this.fromdata==null){
                        this.fromdata={};
                    }
                    this.fromdata.drawFiles=[];
                    this.fromdata.drawFiles=res.data.data.sysFiles;
                }
                this.file_is_show=true;
            })
            .catch(err=>{
                 Toast.clear();
                Notify('上传失败');
            })
            // drawFiles
        },uploadFileDelete(index){
            this.file_is_show=false;
            this.fromdata.drawFiles.remove(index);
            this.file_is_show=true;
        },
        changeFromData(){ //保存数据
            console.log('保存'+this.fromdata.pantchTypeName)
            if (this.fromdata.pantchTypeName=='必选项'){
                this.fromdata.pantchType='1';
            }else if(this.fromdata.pantchTypeName=='推荐项'){
                this.fromdata.pantchType='2';
            }
            let fromdetaildata={
                id:this.fromdata.id,
                lectureItems:this.fromdata.lectureItems,
                pantchType:this.fromdata.pantchType,
                currentUserCode:util.encrypt(this.user.userName),
                drawFiles:this.fromdata.drawFiles,
                source:'MOBILE',
                webId:this.webidCode
            };
            if(this.isdraw){ //保存
                Toast.loading({
                    message: '提交中...',
                    forbidClick: true,
                });
                 saveZcxjFromDetail(Object.assign({fromdetaildata:fromdetaildata},{userName:this.user.userName}))
                    .then((result)=>{
                        Toast.clear();
                        if(result.data.errcode==0){
                            Notify({ type: 'success', message: '提交成功' })
                            this.$router.back(-1);
                        }else {
                            Notify(result.message);
                        }
                       
                    }).catch(()=>{
                        Toast.clear();
                    })
            }else{ //修改
                 Toast.loading({
                    message: '提交中...',
                    forbidClick: true,
                });   
                 changeZcxjFromDetail(Object.assign({fromdetaildata:fromdetaildata},{userName:this.user.userName}))
                    .then((result)=>{
                        Toast.clear();
                        if(result.data.errcode==0){
                            Notify({ type: 'success', message: '修改成功' })
                            this.$router.back(-1);
                        }else {
                            Notify(result.message);
                        }
                    }).catch(()=>{
                        Toast.clear();
                    })
            }
           

        }
    }
  }
</script>
<style  scoped>
/* @import url();*/
   .mt10{
       margin-top: 0px;
   }
   .onlyspanclass{
       font-size: 14px;
       margin-left: 10px;
       color: #646566;
       line-height: 24px;
   }
    
   
    
   
</style>